<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">地址管理</block>
			<!-- <block slot="right">
				<view class="cuIcon-add padding-right themeColor">
					<text>添加</text>
				</view>
			</block> -->
		</cu-custom>
		<view class="padding">
			<view class="padding-sm bg-white radius-xl address-item margin-bottom" v-for="(item, index) in list" :key="index"
				:class="item.is_default ? 'default-border' : ''">
				<view class="content flex-sub" @click="toOrder(item)">
					<view class="username margin-bottom-sm">
						<text class="text-bold text-black padding-right">{{ item.name }}</text>
						<text>{{ item.mobile }}</text>
					</view>
					<view class="detail margin-bottom-sm">
						<text class="text-bold text-sm">{{ item.address_detail }}</text>
					</view>
					<view class="detail">
						<text class="text-grey text-sm">{{ item.province }} {{ item.city }} {{ item.area }} {{ item.street }}</text>
					</view>
				</view>
				<view class="edit" @click.stop="$utils.$page.open('/pages/user/address/save?id=' + item.id, true)">
					<view class="cuIcon-edit"></view>
				</view>
				<view class="default">
					<view>默认</view>
				</view>
			</view>

			<view class="padding margin-top-lg">
				<view class="flex flex-direction">
					<button class="cu-btn china-btn-bg lg round cuIcon-add"
						@click="$utils.$page.open('/pages/user/address/save', true)">添加地址</button>
				</view>
			</view>
		</view>

		<loading v-if="pageLoading" />

	</view>
</template>

<script>
export default {
	data() {
		return {
			pageLoading: false,
			current_page: 1,
			list: [],
			pageType: 'list'
		};
	},
	onLoad(options) {
		if (options.pageType) {
			this.pageType = options.pageType;
		}
	},
	onShow() {
		this.pageLoading = true;
		this.getList();
	},
	methods: {
		getList() {
			this.$utils.$api.Address.getAddress().then(data => {
				this.list = data;
				this.pageLoading = false;
			}).catch(err => {
				this.pageLoading = false;
				this.$utils.$message.error(err.msg);
			});
		},
		toOrder(item) {
			if (this.pageType == 'order') {
				uni.$emit('SELECT_ADDRESS', item);
				this.$utils.$page.back();
			}
		}

	}
}
</script>

<style lang="less" scoped>
.address-item {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.default {
		display: none;
	}
}

.default-border {
	position: relative;
	border: 1upx solid var(--theme-color);

	.default {
		display: block;
		position: absolute;
		right: -2upx;
		background: var(--theme-color);
		color: white;
		top: -2upx;
		border-top-right-radius: 25upx;
		padding: 6upx 12upx;
		font-size: 24upx;
		border-bottom-left-radius: 10upx;
	}

}</style>
